<template>
    <h2>{{name}}--{{age}} -- {{num}}</h2>
    <button @click="add">+1</button>
    <slot name="First"></slot>
    <h3>岗位:{{info.type}}</h3>
    <h3>薪水:{{info.salary}}</h3>
    <button @click="changeSalary">改变薪水---</button>
    <slot name="Second"></slot>
    <button @click="sendData">点击给父组件传递数据</button>
    
  </template>
  
  <script>
  import {ref,reactive} from 'vue'
  export default {
    name: 'App',
    props:['msg','name2'],
    emits:['showData'],
    setup(props,context){
    //   console.log(props);  //第一个参数为父组件给子组件传递的参数
    //   console.log(context); //第二个参数为上下文对象
    //   console.log(context.attrs); //相当于vue2中的$attrs 保存的为父组件给子组件传递但子组件未接受的数据
    //   console.log(context.emit); //父组件给子组件绑定的自定义事件
      console.log(context.slots); //收到的插槽内容。
      let name = 'su'
      let age = 21;
      let num = ref(1);
      let info = reactive({
        type:'前端工程师',
        salary:'20k'
      })
      
      //方法
      function sendData(){
        context.emit('showData',555)
      }
  
      function add(){
        num.value += 1;
      }
      function changeSalary(){
        info.salary = '30k'
      }
      return {
        name,
        age,
        num,
        add,
        info,
        changeSalary,
        sendData
      }
    }
  }
  </script>
  
  <style>
  </style>
  